Ext.define('Seq.svg.Canvas', {
	        extend : 'Seq.svg.Viewer',
	        alias : 'widget.svgcanvas',

	        initSvgOperator : function() {
		        var me = this;

		        me.selectBox = Ext.create('Seq.svg.SelectBox', me);
		        me.selector = Ext.create('Seq.svg.Selector', me);
		        me.drager = Ext.create('Seq.svg.Drag', me);
		        me.align = Ext.create('Seq.svg.Align', me);
		        me.keys = Ext.create('Seq.svg.Keys', me);
		        me.resizer = Ext.create('Seq.svg.Resizer', me);
	        },

	        afterLoad : function() {
		        var me = this;
		        me.callParent();
		        me.initSvgOperator();
	        },

	        onMouseDown : function(e, t) {
		        if (0 == e.button) {
			        var me = this, model = me.callParent(arguments), selectBox = me.selectBox;
			        if (model) {
				        if ('rect' == model.type) {
					        if (null != model.attr('anchor')) {
						        me.resizer.start(model, e);
					        }
				        } else if ('svg' == model.type) {
					        if (!(e.ctrlKey || e.shiftKey)) {
						        selectBox.clear();
					        }
					        me.selector.start(e);
				        } else {
					        selectBox.select(model, e);
					        me.drager.start(e);
				        }
			        }
		        }
	        },

	        onDblClick : function(e, t) {
	        },

	        onMouseMove : function(e, t) {
		        var me = this;
		        if (me.loaded) {
			        me.resizer.move(e);
			        me.selector.move(e);
			        me.drager.move(e);
		        }
	        },

	        onMouseUp : function(e, t) {
		        var me = this;
		        if (me.loaded) {
			        me.resizer.end(e);
			        me.selector.end(e);
			        me.drager.end(e);
		        }
	        }

        })